---
type: integration
title: '@astrojs/partytown'
description: "Apprenez à utiliser l'intégration @astrojs/partytown dans votre projet Astro."
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/partytown/'
category: other
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Cette **[intégration Astro][astro-integration]** active [Partytown](https://partytown.builder.io/) dans votre projet Astro.

## Why Astro Partytown

Partytown est une bibliothèque lazy-loaded qui permet de relocaliser les scripts gourmands en ressources dans un [web worker](https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API) et hors du [main thread](https://developer.mozilla.org/fr/docs/Glossary/Main_thread).

Si vous utilisez des scripts tiers à des fins d'analyse ou de publicité, Partytown est un excellent moyen de vous assurer qu'ils ne ralentissent pas votre site.

L'intégration Astro Partytown installe Partytown pour vous et s'assure qu'il est activé sur toutes vos pages.

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Exécutez l'une des commandes suivantes dans une nouvelle fenêtre de terminal.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add partytown
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add partytown
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add partytown
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez le paquet `@astrojs/partytown` :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/partytown
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/partytown
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/partytown
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```js title="astro.config.mjs" ins={2} ins="partytown()"
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  // ...
  integrations: [partytown()],
});
```

## Utilisation

Partytown devrait être prêt à fonctionner sans aucune configuration. Si vous avez un script tiers existant sur votre site, essayez d'ajouter l'attribut `type="text/partytown"` :

```html ins="type="text/partytown""
<script type="text/partytown" src="fancy-analytics.js"></script>
```

Si vous ouvrez l'onglet "Réseau" depuis [les outils de développement de votre navigateur](https://developer.chrome.com/docs/devtools/open/), vous devriez voir le proxy `partytown` intercepter cette requête.

## Configuration

Pour configurer cette intégration, passez un objet 'config' à l'appel de la fonction `partytown()` dans `astro.config.mjs`.

```js title="astro.config.mjs" {5-7}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      config: {
        //les options vont ici
      },
    }),
  ],
});
```

Cela correspond à l'objet de configuration [Partytown config object](https://partytown.builder.io/configuration).

### config.debug

Partytown est livré avec un mode `debug` ; activez-le ou désactivez-le en passant `true` ou `false` à `config.debug`. Si le [mode `debug`](https://partytown.builder.io/debugging) est activé, il produira des journaux détaillés dans la console du navigateur.

Si cette option n'est pas définie, le mode `debug` sera activé par défaut en mode [dev](/fr/reference/cli-reference/#astro-dev) ou [preview](/fr/reference/cli-reference/#astro-preview).

```js title="astro.config.mjs" {6}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      // Exemple : Désactiver le mode débogage.
      config: { debug: false },
    }),
  ],
});
```

### config.forward

Les scripts tiers ajoutent généralement des variables à l'objet `window` afin que vous puissiez communiquer avec eux à travers votre site. Mais lorsqu'un script est chargé dans un web-worker, il n'a pas accès à l'objet global `window`.

Pour résoudre ce problème, Partytown peut "patcher" des variables sur l'objet fenêtre global et les transmettre au script approprié.

Vous pouvez spécifier les variables à transférer avec l'option `config.forward`. [Pour en savoir plus, consultez la documentation de Partytown](https://partytown.builder.io/forwarding-events)

```js title="astro.config.mjs" {7}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      // Exemple : Ajouter dataLayer.push comme événement de transfert.
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});
```

## Exemples

* [Parcourir les projets avec Astro Partytown sur GitHub](https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json\&type=code) pour plus d'exemples !

[astro-integration]: /fr/guides/integrations-guide/
